<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 参考文档 - Drag/Drag</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Drag">Drag</a></h4>
      <div class="menu-item"><a href="#Drag:constructor">constructor</a></div>
      <div class="menu-item"><a href="#Drag:attach">attach</a></div>
      <div class="menu-item"><a href="#Drag:detach">detach</a></div>
      <div class="menu-item"><a href="#Drag:stop">stop</a></div>
      <h4 class="menu-item"><a href="#Element">Element</a></h4>
      <div class="menu-item"><a href="#Element:makeResizable">makeResizable</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Drag"><a href="#Drag">Class: Drag</a></h1>
      <p class="description">Enables the modification of two CSS properties of an Element based on the position of the mouse while the mouse button is down.</p>
      <h3>Implements</h3>
      <p><a href="../../../docs/core/Class/Class.Extras.html#Events">Events</a>, <a href="../../../docs/core/Class/Class.Extras.html#Chain">Chain</a>, <a href="../../../docs/core/Class/Class.Extras.html#Options">Options</a></p>
      <h2 id="Drag:constructor"><a href="#Drag:constructor">Drag Method: constructor</a></h2>
      <h3 class="description">Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myDragInstance = <span class="kw2">new</span> Drag<span class="br0">(</span>el<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>el      - (<em>element</em>) The Element to apply the transformations to.</li>
        <li>options - (<em>object</em>, 可选) The options object.</li>
      </ol>
      <h3>Options</h3>
      <ul>
        <li>grid            - (<em>integer</em>: defaults to false) Distance in pixels for snap-to-grid dragging.</li>
        <li>handle          - (<em>element</em>: defaults to the element passed in) The Element to act as the handle for the draggable element.</li>
        <li>invert          - (<em>boolean</em>: defaults to false) Whether or not to invert the values reported on start and drag.</li>
        <li>limit           - (<em>object</em>: defaults to false) An object with x and y dimensions used to limit the movement of the Element.</li>
        <li>modifiers       - (<em>object</em>: defaults to {'x': 'left', 'y': 'top'}) An object with x and y properties used to indicate the CSS modifiers (i.e. 'left').</li>
        <li>snap            - (<em>integer</em>: defaults to 6) The distance to drag before the Element starts to respond to the drag.</li>
        <li>style           - (<em>boolean</em>: defaults to true) Whether or not to set the modifier as a style property of the element.</li>
        <li>unit            - (<em>string</em>: defaults to 'px') A string indicating the CSS unit to append to all integer values.</li>
        <li>preventDefault   - (<em>boolean</em>: defaults to false) Calls preventDefault on the event while dragging. See <a href="../../../docs/core/Types/Event.html#Event:preventDefault">Event:preventDefault</a> </li>
        <li>stopPropagation - (<em>boolean</em>: defaults to false) Prevents the event from "bubbling" up in the DOM tree. See <a href="../../../docs/core/Types/Event.html#Event:stopPropagation">Event:stopPropagation</a> </li>
      </ul>
      <h3>Events</h3>
      <ul>
        <li>beforeStart - Executed before the Drag instance attaches the events. Receives the dragged element as an argument.</li>
        <li>start       - Executed when the user starts to drag (on mousedown). Receives the dragged element as an argument.</li>
        <li>snap        - Executed when the user has dragged past the snap option. Receives the dragged element as an argument.</li>
        <li>drag        - Executed on every step of the drag. Receives the dragged element and the event as arguments.</li>
        <li>complete    - Executed when the user completes the drag. Receives the dragged element and the event as arguments.</li>
        <li>cancel      - Executed when the user has cancelled the drag. Receives the dragged element as an argument.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myDrag = <span class="kw2">new</span> Drag<span class="br0">(</span><span class="st0">'myDraggable'</span>, <span class="br0">{</span>

    snap: <span class="nu0">0</span>,
    onSnap: <span class="kw2">function</span><span class="br0">(</span>el<span class="br0">)</span><span class="br0">{</span>
        el.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">'dragging'</span><span class="br0">)</span>;
    <span class="br0">}</span>,

    onComplete: <span class="kw2">function</span><span class="br0">(</span>el<span class="br0">)</span><span class="br0">{</span>

        el.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">'dragging'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">//create an Adobe reader style drag to scroll container</span>
<span class="kw2">var</span> myDragScroller = <span class="kw2">new</span> Drag<span class="br0">(</span><span class="st0">'myContainer'</span>, <span class="br0">{</span>

    style: <span class="kw2">false</span>,
    invert: <span class="kw2">true</span>,
    modifiers: <span class="br0">{</span>x: <span class="st0">'scrollLeft'</span>, y: <span class="st0">'scrollTop'</span><span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>Notes</h3>
      <ul>
        <li>Drag requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
      </ul>
      <h3>See Also</h3>
      <ul>
        <li><a href="http://www.w3schools.com/css/css_units.asp">W3Schools: CSS Units</a></li>
      </ul>
      <h2 id="Drag:attach"><a href="#Drag:attach">Drag Method: attach</a></h2>
      <p class="description">Attaches the mouse listener to the handle, causing the Element to be draggable.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myDrag.<span class="me1">attach</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Drag instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myDrag = <span class="kw2">new</span> Drag<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">detach</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//The Element can't be dragged.</span>

$<span class="br0">(</span><span class="st0">'myActivator'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Ok, now you can drag.'</span><span class="br0">)</span>;
    myDrag.<span class="me1">attach</span><span class="br0">(</span><span class="br0">)</span>;

<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>See Also</h3>
      <ul>
        <li>[$][], <a href="../../../docs/more/Drag/Drag.Move.html#Element:makeDraggable">Element:makeDraggable</a>, <a href="#Drag:detach">Drag:detach</a>, <a href="../../../docs/core/Element/Element.Event.html#Element:addEvent">Element:addEvent</a> </li>
      </ul>
      <h2 id="Drag:detach"><a href="#Drag:detach">Drag Method: detach</a></h2>
      <p class="description">Detaches the mouse listener from the handle, preventing the Element from being dragged.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myDrag.<span class="me1">detach</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Drag instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myDrag = <span class="kw2">new</span> Drag<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myDeactivator'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'No more dragging for you, Mister.'</span><span class="br0">)</span>;
    myDrag.<span class="me1">detach</span><span class="br0">(</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>See Also</h3>
      <ul>
        <li>[$][], <a href="../../../docs/more/Drag/Drag.Move.html#Element:makeDraggable">Element:makeDraggable</a>, <a href="../../../docs/core/Element/Element.Event.html#Element:addEvent">Element:addEvent</a> </li>
      </ul>
      <h2 id="Drag:stop"><a href="#Drag:stop">Drag Method: stop</a></h2>
      <p class="description">Stops (removes) all attached events from the Drag instance. If the event is passed, it executes the 'complete' Event.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myDrag.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">[</span>event<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>event - (<em>event</em>) the Event that is fired (typically by mouseup). This is passed along to the 'complete' Event in addition to the element that was dragged. If you pass along any truth-y value (i.e. not <em>false</em>, <em>zero</em>, etc) the 'complete' event will be fired and that value will be passed to the 'complete' event.</li>
      </ol>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myDrag = <span class="kw2">new</span> Drag<span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>
    onSnap: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

        <span class="kw1">this</span>.<span class="me1">moved</span> = <span class="kw1">this</span>.<span class="me1">moved</span> || <span class="nu0">0</span>;
        <span class="kw1">this</span>.<span class="me1">moved</span>++;
        <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">moved</span> &gt; <span class="nu0">100</span><span class="br0">)</span><span class="br0">{</span>

            <span class="kw1">this</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;
            <span class="kw3">alert</span><span class="br0">(</span><span class="st0">"Stop! You'll make the Element angry."</span><span class="br0">)</span>;
        <span class="br0">}</span>
    <span class="br0">}</span>

<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h1 id="Element"><a href="#Element">类型: Element</a></h1>
      <p class="description">Custom Type to allow all of its methods to be used with any DOM element via the document.id function <a href="../../../docs/core/Element/Element.html#Window:document-id">document.id</a>.</p>
      <h2 id="Element:makeResizable"><a href="#Element:makeResizable">Element Method: makeResizable</a></h2>
      <p class="description">Adds drag-to-resize behavior to an Element using supplied options.</p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myResize = myElement.<span class="me1">makeResizable</span><span class="br0">(</span><span class="br0">[</span>options<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>options - (<em>object</em>, 可选) See [Drag][#Drag] for acceptable options.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) The Drag instance that was created.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myResize = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">makeResizable</span><span class="br0">(</span><span class="br0">{</span>
    onComplete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Done resizing.'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>See Also</h3>
      <ul>
        <li><a href="#Drag">Drag</a></li>
      </ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
